<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>数据类型盒子实验</title>
  <style>
    body {
      font-family: 'Segoe UI', Arial, sans-serif;
      padding: 20px;
      background-color: #f5f5f5;
      text-align: center;
    }
    h1 { color: #333; }
    h2 { color: #555; margin-top: 30px; }

    /* 数据块样式 */
    .data-item {
      padding: 12px 18px;
      margin: 8px;
      background: #4CAF50;
      color: white;
      border-radius: 8px;
      display: inline-block;
      cursor: move;
      font-weight: bold;
      box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
    }
    .data-item:hover {
      background: #45a049;
    }

    /* 类型盒子 */
    .box {
      width: 140px;
      height: 120px;
      border: 3px solid #333;
      margin: 15px auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      cursor: pointer;
      border-radius: 10px;
      transition: transform 0.2s;
    }
    .box:hover {
      transform: scale(1.05);
    }

    .char { background-color: #ffebee; border-color: red; color: red; }
    .int  { background-color: #e8f5e9; border-color: green; color: green; }
    .float{ background-color: #e3f2fd; border-color: blue; color: blue; }
    .double{ background-color: #fff3e0; border-color: orange; color: orange; }

    /* 输入测试区 */
    input[type="number"] {
      padding: 10px;
      font-size: 16px;
      width: 200px;
      margin: 10px;
    }
    button {
      padding: 10px 20px;
      background: #2196F3;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }
    button:hover {
      background: #0b7dda;
    }

    #result {
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
      min-height: 30px;
    }
  </style>
</head>
<body>

  <h1>📦 数据类型盒子实验</h1>
  <p>拖动数据到合适的盒子，看看能不能装下！</p>

  <h2>🎯 数据块（试试拖动它们）</h2>
  <div id="data-pool">
    <div class="data-item" draggable="true" data-value="65">65 (字符 'A')</div>
    <div class="data-item" draggable="true" data-value="3.14">3.14 (圆周率)</div>
    <div class="data-item" draggable="true" data-value="-100">-100 (负数)</div>
    <div class="data-item" draggable="true" data-value="10000000000">10,000,000,000 (100亿!)</div>
    <div class="data-item" draggable="true" data-value="2147483647">2,147,483,647 (int最大值)</div>
  </div>

  <h2>🧰 数据类型盒子</h2>
  <div id="type-boxes">
    <div class="box char" 
         data-type="char" 
         data-max="127" 
         data-min="-128">
      char<br>[-128 ~ 127]<br>1字节
    </div>
    <div class="box int" 
         data-type="int" 
         data-max="2147483647" 
         data-min="-2147483648">
      int<br>整数<br>4字节
    </div>
    <div class="box float" 
         data-type="float" 
         data-max="3.4e38" 
         data-min="-3.4e38">
      float<br>小数(精度低)<br>4字节
    </div>
    <div class="box double" 
         data-type="double" 
         data-max="1.8e308" 
         data-min="-1.8e308">
      double<br>高精度小数<br>8字节
    </div>
  </div>

  <h2>✏️ 手动测试：这个数能放进 int 吗？</h2>
  <input type="number" id="userInput" placeholder="输入一个整数，比如 3000000000" />
  <button onclick="testInt()">测试是否溢出</button>

  <div id="result"></div>

  <script>
    // 拖拽逻辑
    document.addEventListener("DOMContentLoaded", function () {
      const dataItems = document.querySelectorAll(".data-item");
      const boxes = document.querySelectorAll(".box");

      dataItems.forEach(item => {
        item.addEventListener("dragstart", e => {
          e.dataTransfer.setData("text/plain", e.target.dataset.value);
          e.dataTransfer.effectAllowed = "copy";
        });
      });

      boxes.forEach(box => {
        box.addEventListener("dragover", e => {
          e.preventDefault();
          e.dataTransfer.dropEffect = "copy";
        });

        box.addEventListener("drop", e => {
          e.preventDefault();
          const valueText = e.dataTransfer.getData("text/plain");
          let value = parseFloat(valueText);

          const type = box.dataset.type;
          const min = parseFloat(box.dataset.min);
          const max = parseFloat(box.dataset.max);
          const resultDiv = document.getElementById("result");

          // 特殊处理 char：允许字符或小整数
          if (type === "char") {
            if (isNaN(value)) {
              resultDiv.innerHTML = `✅ '${valueText}' 是字符，可以存入 char！`;
            } else if (value >= -128 && value <= 127) {
              resultDiv.innerHTML = `✅ ${value} 在 char 范围内，可以！`;
            } else {
              resultDiv.innerHTML = `❌ ${value} 超出 char 范围 [-128~127]！`;
            }
            return;
          }

          // 判断是否是小数但要放入整型
          if ((type === "int" || type === "char") && valueText.includes('.')) {
            resultDiv.innerHTML = `❌ 小数不能存入 ${type} 类型！`;
            return;
          }

          // 正常数值判断
          if (value >= min && value <= max) {
            resultDiv.innerHTML = `✅ ${value} 可以安全存入 ${type}！`;
          } else {
            resultDiv.innerHTML = `❌ ${value} 超出 ${type} 范围！[${min} ~ ${max}]`;
          }
        });
      });
    });

    // 手动测试 int 溢出
    function testInt() {
      const input = document.getElementById("userInput").value.trim();
      if (!input) {
        alert("请输入一个数字！");
        return;
      }

      const val = parseFloat(input);
      const intMax = 2147483647;
      const intMin = -2147483648;
      const result = document.getElementById("result");

      if (val > intMax || val < intMin) {
        result.innerHTML = `<span style="color:red">❌ 溢出！int 最大只能存 ${intMax}</span>`;
      } else if (input.includes('.')) {
        result.innerHTML = `<span style="color:orange">⚠️ 注意：小数会被截断，比如 ${val} → ${Math.trunc(val)}</span>`;
      } else {
        result.innerHTML = `<span style="color:green">✅ 可以存入 int：${val}</span>`;
      }
    }
  </script>
</body>
</html>